<template>
	<!-- 提现列表 -->
	<view class="withdrawSelect">
		
		<view class="withdrawType-list">
			
			<view class="withdrawType-list-item">
				<view class="left">
					<image class="image"
						:src="withdrawList.url"
						mode="aspectFit"></image>
					<text class="text">提现至</text>
				</view>
				<view class="right">

					<view
						class="right-childBox"
						@click="enterExtractMoneyWay">

						<image v-if="Object.keys(selectCar).length>0"
							class="right-childBox-image"
							:src="withdrawList.list[0].url"
							mode="aspectFit"></image>

						<text>{{Object.keys(selectCar).length>0 ? selectCar.bankName :'没有绑定银行卡'}}</text>

						<view class="right-forward">
							<uni-icons type="forward"
								size="40rpx"
								color="#D6D5D5"></uni-icons>
						</view>

					</view>

				</view>
			</view>
		</view>


		<!-- 弹出 -->
		<PopList :show="popShow"
			:selectCar="selectCar"
			@close="close"
			@setSelectCar="setSelectCar"
			:list="withdrawList.list"></PopList>

	</view>
</template>

<script>
	// 请求方式api
	import {
		searchAccountListApi, //查询账户绑定列表
	} from '@/api/withdrawal.js'

	// 公共方法
	// import {setDeepCopy} from '@/common/utils/index.js'

	//页面组件
	import PopList from './popList.vue'


	export default {
		components: {
			PopList
		},
		data() {
			return {
				// 弹出层
				popShow: false,

				//选中的卡
				selectCar: {},

				//绑定账户信息
				listData: [],

				// 提现方式
				withdrawList: 					{
						title: '银行卡',
						url: '/static/images/YL.png',
						status: false,
						list: []
					}
			};
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				console.log('1');

				this.searchAccountList()
			},

			/**
			 * 查询账户绑定列表
			 */
			async searchAccountList() {
				let params = {
					pageNum: 1,
					pageSize: 10
				}
				const res = await searchAccountListApi(params)
				if (res.rows.length > 0) {
					this.withdrawList.list = res.rows.map(res3 => ({
						bankName: res3.bankName===null ? '支付宝':res3.bankName, // 银行名称
						accountNo:res3.accountNo, // 账号
						accountType:res3.accountType, // 账号类型
						openBankName:res3.openBankName ,// 开户行名称
						accountName:res3.accountName, // 真名，账户名
						id: res3.id,
						
					}))
					
					this.selectCar = this.withdrawList.list[0]

					this.listData = [...res.rows]
				}


			},


			/**
			 * 选择银行卡，打开弹出层选择
			 */
			enterExtractMoneyWay() {
				if (Object.keys(this.selectCar).length > 0) {
					this.popShow = true
				} else {
					uni.navigateTo({
						url: '/pages/wallet/index'
					});
				}
			},

			/**
			 * 设置提现的卡
			 */
			setSelectCar(val) {
				console.log('改变卡', val);
				this.selectCar = {
					...val
				}
			},

			submit() {
				console.log('立即提现', this.selectCar);


			},

			/**
			 * 关闭弹窗
			 */
			close() {
				this.popShow = false
			}
		}
	}
</script>

<style lang="less">
	.withdrawSelect {
		width: 100%;


		.withdrawType-list {
			width: 100%;

			.withdrawType-list-item {
				#flex(-, space-between, center);

				&:nth-child(2n) {
					margin: 24rpx 0;
				}

				.left {
					#flex(-, start, center);

					.image {
						#box(40rpx, 40rpx);
					}

					.text {
						#font(28rpx, @font-title-color, normal);
						margin-left: 16rpx;
					}
				}

				.right {
					.right-childBox {
						#flex(-, center, center);
						#font(28rpx, @font-title-color);

						.right-childBox-image {
							#box(32rpx, 32rpx);
						}

						.right-forward {
							#box(40rpx, 40rpx);
							#flex(-, center, center);
						}
					}



					.image {
						#box(32rpx, 32rpx);
					}

					.icon {
						box-sizing: border-box;
						#box(32rpx, 32rpx, 50%, none, 2rpx solid #D6D5D5);
					}
				}
			}
		}
	}
</style>